import {
  View,
  StyleSheet,
  Text,
  Image,
  TouchableOpacity,
  ScrollView,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
// import packageJson from "../../package.json";
import {
  Avatar,
  AvatarBadge,
  AvatarFallbackText,
  AvatarImage,
} from "@/components/ui/avatar";

function Example({ url, name }: { url: string; name: string }) {
  return (
      <Avatar size="lg">
        <AvatarFallbackText>{name}</AvatarFallbackText>
      <AvatarImage
          style={styles.avatar}
          source={{
            uri: url,
          }}
        />
        <AvatarBadge />
      </Avatar>
  );
}

export default function My() {
  // 模拟用户数据
  const userData = {
    avatar:
      "https://th.bing.com/th/id/OIP.z1YntrnDMj_3SqCMEDpcbAHaHa?rs=1&pid=ImgDetMain",
    nickname: "用户昵称",
    userId: "ID: 12345678",
    level: 5,
  };

  // 功能选项列表
  const menuItems: { icon: any; title: String; badge: String }[] = [
    { icon: "settings-outline", title: "设置", badge: "" },
    { icon: "heart-outline", title: "我的收藏", badge: "" },
    { icon: "time-outline", title: "浏览历史", badge: "" },
    { icon: "star-outline", title: "我的评价", badge: "" },
    { icon: "help-circle-outline", title: "帮助中心", badge: "" },
    { icon: "mail-outline", title: "意见反馈", badge: "" },
  ];

  // 用户信息mod
  function UserInfo() {
    return (
      <View style={styles.userInfoContainer}>
        <Example url={userData.avatar} name={userData.nickname}  />
        <TouchableOpacity style={styles.editButton}>
          <Text style={styles.editButtonText}>编辑资料</Text>
        </TouchableOpacity>
      </View>
    );
  }

  // 用户数据统计mod
  function UserStats() {
    return (
      <View style={styles.statsContainer}>
        <View style={styles.statItem}>
          <Text style={styles.statNumber}>128</Text>
          <Text style={styles.statLabel}>关注</Text>
        </View>
        <View style={styles.statDivider} />
        <View style={styles.statItem}>
          <Text style={styles.statNumber}>256</Text>
          <Text style={styles.statLabel}>粉丝</Text>
        </View>
        <View style={styles.statDivider} />
        <View style={styles.statItem}>
          <Text style={styles.statNumber}>64</Text>
          <Text style={styles.statLabel}>获赞</Text>
        </View>
      </View>
    );
  }

  return (
    <ScrollView style={styles.scrollView}>
      <View style={styles.container}>
        {/* 用户信息区域 */}
        <UserInfo />

        {/* 用户数据统计 */}
        <UserStats />

        {/* 功能菜单 */}
        <View style={styles.menuContainer}>
          {menuItems.map((item, index) => (
            <TouchableOpacity
              key={index}
              style={styles.menuItem}
              onPress={() => handleMenuItemPress(item)}
            >
              <View style={styles.menuIconContainer}>
                <Ionicons name={item.icon} size={24} color="#555" />
              </View>
              <Text style={styles.menuTitle}>{item.title}</Text>
              <View style={styles.menuRight}>
                {item.badge ? (
                  <View style={styles.badgeContainer}>
                    <Text style={styles.badgeText}>{item.badge}</Text>
                  </View>
                ) : null}
                <Ionicons name="chevron-forward" size={20} color="#ccc" />
              </View>
            </TouchableOpacity>
          ))}
        </View>

        {/* 版本信息 */}
        <Text style={styles.versionText}>
          {/* 人生模拟器 v{packageJson.version} */}
          人生模拟器 v1.0.1
        </Text>
      </View>
    </ScrollView>
  );

  function handleMenuItemPress(item: any) {
    // 处理菜单选项点击事件
    console.log(`Clicked: ${item.title}`);
  }
}

const styles = StyleSheet.create({
  scrollView: {
    flex: 1,
    backgroundColor: "#f5f5f5",
  },
  container: {
    flex: 1,
    padding: 16,
  },
  userInfoContainer: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    backgroundColor: "white",
    borderRadius: 12,
    padding: 16,
    marginBottom: 16,
    elevation: 2,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
  },
  avatar: {
    width: 70,
    height: 70,
    borderRadius: 35,
    marginRight: 16,
  },
  editButton: {
    backgroundColor: "#f0f0f0",
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 16,
  },
  editButtonText: {
    fontSize: 12,
    color: "#333",
  },
  statsContainer: {
    flexDirection: "row",
    backgroundColor: "white",
    borderRadius: 12,
    padding: 16,
    marginBottom: 16,
    justifyContent: "space-around",
    elevation: 2,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
  },
  statItem: {
    alignItems: "center",
    flex: 1,
  },
  statNumber: {
    fontSize: 18,
    fontWeight: "bold",
    marginBottom: 4,
  },
  statLabel: {
    fontSize: 12,
    color: "#666",
  },
  statDivider: {
    width: 1,
    height: "70%",
    backgroundColor: "#eee",
  },
  menuContainer: {
    backgroundColor: "white",
    borderRadius: 12,
    marginBottom: 16,
    overflow: "hidden",
    elevation: 2,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
  },
  menuItem: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 16,
    paddingHorizontal: 16,
    borderBottomWidth: 1,
    borderBottomColor: "#f0f0f0",
  },
  menuIconContainer: {
    width: 24,
    marginRight: 12,
  },
  menuTitle: {
    flex: 1,
    fontSize: 16,
    color: "#333",
  },
  menuRight: {
    flexDirection: "row",
    alignItems: "center",
  },
  badgeContainer: {
    backgroundColor: "#ff6b6b",
    borderRadius: 10,
    paddingHorizontal: 6,
    paddingVertical: 2,
    marginRight: 8,
  },
  badgeText: {
    color: "white",
    fontSize: 12,
  },
  versionText: {
    textAlign: "center",
    color: "#999",
    fontSize: 12,
    marginTop: 16,
    marginBottom: 24,
  },
});
